<script setup lang="ts">
import { inject, ref } from 'vue'
import { EditorType } from '@/constants'
import type { VueComType } from '@/types'

const props = defineProps<{
  currentStatus: number
  status: string[]
  isShow: boolean
  isUse: boolean
  configKey: EditorType
  editCom: VueComType
}>()
const updateStatus = inject('updateStatus')
const optionArr = ref(props.status)
const switchChangeHandle = (val: boolean) => {
  console.log(props.configKey, val)
  updateStatus(props.configKey, val)
}

const inputHandle = (val: string, index: number) => {}
</script>

<template>
  <div key="id">
    <div class="flex align-items-center mb-10">
      <div class="mr-10">辅助文字</div>
      <el-switch :model-value="isUse" @change="switchChangeHandle" />
    </div>
    <div v-if="isUse">
      <el-input
        v-for="(_, index) in status"
        :key="index"
        class="mt-5 mb-5"
        placeholder="辅助文字"
        v-model="optionArr[index]"
        @input="(val: string) => inputHandle(val, index)"
      />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
